import React from "react";
import { Form, Input } from "antd";
import commonStyles from "./common.module.scss";

type PropsType = {
  id: string;
  props: {
    title: string;
    placeholder?: string;
    prompt?: string;
    isRequired?: boolean;
    answer?: string;
  };
};

const QuestionTextarea: React.FC<PropsType> = ({ id, props }) => {
  const { title, placeholder, prompt, isRequired, answer } = props;

  return (
    <Form.Item
      label={title}
      name={id}
      initialValue={""}
      rules={[{ required: !!isRequired, message: "不能为空" }]}
      className={commonStyles.h5}
    >
      <div className={commonStyles.content}>
        <Input.TextArea
          autoSize={{ minRows: 5, maxRows: 8 }}
          placeholder={placeholder}
          disabled={!!answer || answer === ""}
          allowClear
          defaultValue={answer}
        />
        {(answer || answer === "") && (
          <div
            style={{
              color: "#faad14",
            }}
          >
            提示答案：{prompt}
          </div>
        )}
      </div>
    </Form.Item>
  );
};

export default QuestionTextarea;
